<template>
  <div>
    <div class="head">
      <img @click="gohome" src="@/assets/image/order/矩形 3.png" alt="" />
      <p>新增收货地址</p>
      <span></span>
    </div>
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      areaList,
      searchResult: [],
    };
  },
  created() {},
  methods: {
    onSave(val) {
      this.$store.commit("changeadd", val);
      localStorage.setItem("name", val.name);
      localStorage.setItem("address", val.addressDetail);
      localStorage.setItem("phone", val.tel);

      this.$router.go(-1);
    },
    gohome() {
      this.$router.go(-1);
    },
    onDelete() {
      Toast("delete");
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
};
</script>

<style lang="less" scoped>
.head {
  height: 88px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffcc00;
  border-radius: 10px;

  img {
    display: block;
    margin-left: 40px;
    height: 44px;
    width: 26px;
  }
  p {
    font-size: 40px;
    margin-right: 50px;
    font-weight: 500;
    color: #323232;
  }
  span {
    font-size: 30px;

    font-weight: 400;
    color: #646464;
  }
}
</style>
